<template>
  <view class="root">
    <acme-app-bar title="SlidebarMenu"></acme-app-bar>
    
    <acme-cell-group style="margin-top: 20upx;">
      <acme-cell title="左侧展开"  @click="openMenu('left')" link/>
      <acme-cell title="右侧展开"  @click="openMenu('right')" link/>
    </acme-cell-group>
    
    <acme-popup v-model="showMenu" :position="position" :styles="{width: '560rpx', height: '100%'}">
      <view class="slide-menu">
        <scroll-view scroll-y>
          <view class="item" v-for="(item, index) in list" :key="item.name" :class="{'item-line': item.line}"
            @click="clickMenu(item, index)"
          >
            <view class="iconfont">{{item.icon}}</view>
            <text class="text">{{item.name}}</text>
          </view>
        </scroll-view>
        <view class="bottom-wrap" :style="{bottom: `${safeAreaBottom+10 || 30}px`}">
          <view class="item" v-for="(item, index) in bottomList" :key="item.name" 
            @click="clickBottomButton(item, index)"
          >
            <view class="iconfont">{{item.icon}}</view>
            <text class="text">{{item.name}}</text>
          </view>
        </view>
      </view>
    </acme-popup>
  </view>
</template>

<script>
  import AcmeCellGroup from "@/components/acme-design/cell-group"
  import AcmeCell from "@/components/acme-design/cell"
  export default {
    components: {
      AcmeCellGroup,
      AcmeCell,
    },
    data() {
      return {
        safeAreaBottom: 0,
        showMenu: false,
        position: 'left',
        list: [
          {
            name: '发现好友',
            icon: '\ue600',
            line: true
          },{
            name: '我的草稿',
            icon: '\ue8b7'
          },{
            name: '创作中心',
            icon: '\ue850'
          },{
            name: '钱包',
            icon: '\ue695'
          },{
            name: '免流量',
            icon: '\ue8bf'
          },{
            name: '好物体验',
            icon: '\ue8b5',
            line: true
          },{
            name: '订单',
            icon: '\ue695'
          },{
            name: '购物车',
            icon: '\ue621'
          },{
            name: '卡劵',
            icon: '\ue8cd'
          },{
            name: '心愿单',
            icon: '\ue8ab'
          },{
            name: '会员',
            icon: '\ue604',
            line: true
          },{
            name: '社区公约',
            icon: '\ue8b7'
          }
        ],
        bottomList: [
          {
            name: '设置',
            icon: '\ue612',
          },{
            name: '帮助与客服',
            icon: '\ue8cf'
          },{
            name: '扫一扫',
            icon: '\ue8b6'
          },
        ]
      };
    },
    onLoad() {
      this.getSystemInfo()
    },
    methods: {
      clickMenu(item, index) {
        this.closeMenu()
      },
      clickBottomButton(item, index) {
        this.closeMenu()
      },
      openMenu(position) {
        this.showMenu = true
        this.position = position
      },
      closeMenu() {
        this.showMenu = false
      },
      getSystemInfo() {
        try {
          const res = uni.getSystemInfoSync()
          this.safeAreaBottom = res.safeAreaInsets.bottom
        } catch (e) {}
      }
    },
  };
</script>


<style lang="scss" scoped>
  .root {
    overflow: hidden;
    
    /deep/.uni-scroll-view::-webkit-scrollbar {
    	display: none
    }
    
    .slide-menu {
      height: 100%;
      box-sizing: border-box;
      padding: 90upx 0 0 60upx;
      position: relative;
      
      scroll-view {
        width: calc(100% - 60upx);
        height: calc(100% - 230upx);
        box-sizing: border-box;
        
        .item {
          height: 110upx;
          line-height: 110upx;
          display: flex;
          align-items: center;
          position: relative;
          
          &.item-line {
            
            &::after {
              width: calc(100% - 50upx);
              content: '';
              height: 1px;
              background-color: #F0F0F0;
              transform: scaleY(0.5);
              position: absolute;
              left: 5upx;
              right: 0;
              bottom: 0;
            }
          }
          
          .iconfont {
            color: #333;
            font-size: 40upx;
          }
          
          .text {
            color: #333;
            font-size: 30upx;
            font-weight: 500;
            margin-left: 25upx;
          }
        }
      }
      
      .bottom-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        left: 60upx;
        right: 60upx;
        
        .item {
          text-align: center;
          
          .iconfont {
            display: block;
            width: 70upx;
            height: 70upx;
            line-height: 70upx;
            text-align: center;
            border-radius: 50%;
            margin: auto;
            color: #888;
            font-size: 40upx;
            background-color: #FAFAFA;
          }
          
          .text {
            color: #888;
            font-size: 26upx;
            display: block;
            line-height: 1;
            margin-top: 15upx;
          }
        }
      }
    }
  }
</style>